<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">
// import i18n from '@/locales/i18n'
import { test } from '@/api/model'
import { ref,computed } from "vue";
import LeftMenu from '@/Layout/Menu/LeftMenu.vue'
import HeaderNav from '@/Layout/HeaderNav/HeaderNav.vue'






const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<template>
  <div class="layout-container">
    <!-- 使用侧边栏组件 -->
    <LeftMenu />

    <!-- 右侧内容区 -->
    <div class="main-container">
      <!-- 右侧顶部 -->

      <HeaderNav/>
      <!-- 右侧内容区 -->
      <div class="content">
        <div class="content-card">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

.layout-container {
  display: flex;
  height: 100vh;
  width: 100%;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  height: 64px;
  background-color: #fff;
  border-bottom: 1px solid #dcdfe6;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.content {
  flex: 1;
  padding: 20px;
  background-color: #f0f2f5;
  overflow-y: auto;
}

.content-card {
  max-width: 1200px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 滚动条样式 */
.content::-webkit-scrollbar {
  width: 6px;
}

.content::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

/* 暗色主题菜单 */
/* :deep(.el-menu) {
  background-color: #001529;
}

:deep(.el-menu-item) {
  color: rgba(255, 255, 255, 0.65);
}

:deep(.el-menu-item.is-active) {
  color: #1890ff;
  background-color: #1890ff1a;
}

:deep(.el-menu-item:hover) {
  color: #fff;
  background-color: #1890ff33;
} */
</style>
